<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <!-- <link href="../bootstrap/css/bootstrap.css" rel="stylesheet" /> -->
    <style>
      .zhegai {
        width: 100%;
        height: 100%;
        background-color: rgba(229, 229, 229, 0.3);
        position: absolute;
        display: flex;
        align-items: center;
        display: none;
        top: 0;
      }
      .tanchu {
        width: 250px;
        height: 130px;
        border: 1px solid #ff9e1d;
        text-align: center;
        align-items: center;
        /* margin: 0 auto; */
        left: 100px;
        top: 0;
        position: absolute;
      }
      .header {
        width: 250px;
        height: 30px;
        background-color: #ffcc00;
      }
      p {
        display: inline-block;
        float: right;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <!-- 带遮罩层的弹窗 -->
    <button>弹出层</button>
    <div class="zhegai">
      <div class="tanchu">
        <div class="header">
          <p>X</p>
        </div>
        内容
      </div>
    </div>

    <script>
      var button=document.querySelector('button')
      var div1=document.querySelector('.zhegai')
      var tanchu=document.querySelector('.tanchu')
      
      button.onclick=function () {
          if (div1.style.display == "block") {
            div1.style.display = "none";
          } else {
            div1.style.display = "block";
          }
      }
      var p=document.querySelector('p')
      p.onclick=function () {
          if (div1.style.display == "block") {
            div1.style.display = "none";
          } else {
            div1.style.display = "block";
          }
      }


      tanchu.onmousedown = function(ev) {
        var offsetX=ev.offsetX;
        var offsetY=ev.offsetY;
        document.body.onmousemove = function(ev) {
          tanchu.style.left = ev.pageX-offsetX + "px";
          tanchu.style.top = ev.pageY-offsetY + "px";
          // ev.stopPropagation();
        };
      };
      tanchu.onmouseup=function (ev) {
          document.body.onmousemove=null
      }

      document.body.onmousewheel=function (ev) {
          console.dir(ev.deltaX);
          console.dir(ev.deltaY);
          ev.stopPropagation();
      }
    </script>
    <!-- <script src="../bootstrap/js/jquery.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script> -->
  </body>
</html>
